<template>
	<view class="user-spread-month-bill">
		<view class="top-box">
			<view class="row white">
				<view class="type-change" @tap="typeListShow=true">
					{{currType.label}}
					<u-icon class="ml10" :name="typeListShow?'arrow-up':'arrow-down'"></u-icon>
				</view>
			</view>
			<view class="row-between mt20 white">
				<view class="xxl">
					{{currDate.label}}
				</view>
				<view class="xs">
					销售额：暂无
				</view>
			</view>
			<view class="row mt10 mb10">
				<u-button size="mini" @click="openPicker(3)">选年份</u-button>
				<u-button size="mini" @click="openPicker(2)">选月份</u-button>
				<u-button size="mini" @click="openPicker(1)">选日期</u-button>
				<u-button size="mini" @click="calendarShow=true;dateType = 4;">自定义</u-button>
			</view>
		</view>
		<view class="mt30" style="padding: 0 20rpx;">
			<block v-for="(item) in orderList" :key="item.id">
				<view class="show-panel" @tap="()=>jumpPage(item)">
					<view class="store-info">
						<image :src="item.agent.logo" mode="aspectFill"
							style="width: 100rpx;height: 100rpx;border-radius: 10rpx;"></image>
						<view style="flex: 1;display: flex;flex-direction: column;justify-content: space-between;">
							<view class="xxl">
								{{item.agent.name}}
							</view>
							<!-- <u-tag  text="下属团队" size="mini" type="warning" /> -->
						</view>
					</view>
					<view class="row-between">
						<view class="column-center" style="gap: 20rpx;">
							<text style="color: #de414f;">
								{{item.lease}}
							</text>
							<text>租赁总额(元)</text>
						</view>
						<view class="column-center" style="gap: 20rpx;">
							<text style="color: #de414f;">
								{{item.buy}}
							</text>
							<text>租售总额(元)</text>
						</view>
						<view class="column-center" style="gap: 20rpx;">
							<text style="color: #de414f;">
								{{item.money}}
							</text>
							<view>
								佣金总额(元)
								<u-icon name="arrow-right" size="28rpx" color="#666666" />
							</view>
						</view>
					</view>
				</view>
			</block>
		</view>
		<loading-footer :status="loadingStatus">
		</loading-footer>

		<u-select v-model="typeListShow" :default-value="[currType.value-1]" :list="typeList"
			@confirm="typeConf"></u-select>
		<u-picker mode="time" v-model="pickerShow" :params="pickerParams" @confirm="pickerConf"></u-picker>
		<u-calendar v-model="calendarShow" @change="calendarConf" mode="range"></u-calendar>
	</view>
</template>

<script>
	// +----------------------------------------------------------------------
	// | LikeShop100%开源免费商用电商系统
	// +----------------------------------------------------------------------
	// | 欢迎阅读学习系统程序代码，建议反馈是我们前进的动力
	// | 开源版本可自由商用，可去除界面版权logo
	// | 商业版本务必购买商业授权，以免引起法律纠纷
	// | 禁止对系统程序代码以任何目的，任何形式的再发布
	// | Gitee下载：https://gitee.com/likemarket/likeshopv2
	// | 访问官网：https://www.likemarket.net
	// | 访问社区：https://home.likemarket.net
	// | 访问手册：http://doc.likemarket.net
	// | 微信公众号：好象科技
	// | 好象科技开发团队 版权所有 拥有最终解释权
	// +----------------------------------------------------------------------
	// | Author: LikeShopTeam
	// +----------------------------------------------------------------------
	import {
		getMonthBill
	} from "@/api/user";
	import {
		loadingType
	} from '@/utils/type';
	import {
		loadingFun
	} from "@/utils/tools"
	const typeList = [{
		value: -2,
		label: '全部账单'
	}, {
		value: -3,
		label: '我的'
	}, {
		value: -1,
		label: '下属团队'
	}]
	export default {
		data() {
			return {
				loadingStatus: loadingType.LOADING,
				page: 1,
				orderList: [],
				pickerParams: {
					year: true,
					month: true,
					day: true,
					hour: false,
					minute: false,
					second: false
				},
				pickerShow: false,
				currDate: null,
				calendarShow: false,
				typeList: typeList,
				typeListShow: false,
				currType: typeList[0],
				dateType: 3,
			};
		},

		components: {},
		props: {},

		/**
		 * 生命周期函数--监听页面加载
		 */
		onLoad: function(options) {
			const year = new Date().getFullYear();
			this.currDate = {
				label: year + '年',
				value: year
			}
			this.getMonthBillFun();
		},


		onReachBottom: function() {
			this.getMonthBillFun()
		},

		methods: {
			jumpPage(v) {
				console.log(v)
				uni.navigateTo({
					url: '/bundle/pages/user_spread_month_bill_detail/user_spread_month_bill_detail?id=' + v
						.user_id + '&type=' + this.dateType + '&name=' + this.currDate.value,
				})
			},
			getMonthBillFun() {
				let {
					loadingStatus,
					page,
					orderList,
				} = this;
				loadingFun(getMonthBill, page, orderList, loadingStatus, {
					type: this.dateType,
					name: this.currDate.value,
					agent_id: this.currType.value
				}).then(res => {
					if (res) {
						this.page = res.page;
						this.orderList = res.dataList
						this.loadingStatus = res.status
					}
				})
			},
			openPicker(type) {
				switch (type) {
					case 3:
						this.pickerParams.year = true;
						this.pickerParams.month = false;
						this.pickerParams.day = false;
						break;
					case 2:
						this.pickerParams.year = false;
						this.pickerParams.month = true;
						this.pickerParams.day = false;
						break;
					case 1:
						this.pickerParams.year = false;
						this.pickerParams.month = true;
						this.pickerParams.day = true;
						break;
				}
				this.dateType = type;
				this.pickerShow = true;
			},
			pickerConf(e) {
				let temp = {
					label: '',
					value: ''
				}
				if (e.year) {
					temp.label += e.year + '年';
					temp.value += e.year
				}
				if (e.month) {
					temp.label += e.month + '月';
					temp.value += e.month;
				}
				if (e.day) {
					temp.label += e.day + '日';
					temp.value += '-' + e.day;
				}
				this.currDate = temp
				this.clearData();
				this.getMonthBillFun();
			},
			calendarConf(e) {
				function translateDate(date) {
					const arr = date.split('-');
					return `${arr[0]}年${arr[1]}月${arr[2]}日`
				}
				this.currDate = {
					label: translateDate(e.startDate) + '-' + translateDate(e.endDate),
					value: e.startDate + '/' + e.endDate
				}
				this.clearData();
				this.getMonthBillFun();
			},
			clearData() {
				this.page = 1;
				this.loadingStatus = loadingType.LOADING;
				this.orderList = [];
			},
			typeConf(e) {
				this.currType = e[0];
				this.clearData();
				this.getMonthBillFun();
			}
		}
	};
</script>
<style lang="scss">
	.user-spread-month-bill {
		.top-box {
			background-color: #dc503f;
			width: 100%;
			padding: 20rpx;

			.type-change {
				background-color: rgba(0, 0, 0, 0.2);
				line-height: 80rpx;
				padding: 0 30rpx;
				border-radius: 80rpx;
				font-size: 22rpx;
			}
		}

		.bill-time {
			padding: 20rpx;
			line-height: 34rpx;
		}

		.show-panel {
			background-color: white;
			padding: 30rpx;
			border-radius: 20rpx;
			box-sizing: border-box;

			.store-info {
				display: flex;
				gap: 20rpx;
				width: 100%;
				border-bottom: 1px solid #eee;
				padding-bottom: 30rpx;
				margin-bottom: 30rpx;
			}
		}
	}
</style>